<template>
  <!-- 客户地图信息 -->
  <el-dialog
    v-el-drag-dialog
    title="客户地图信息"
    :visible.sync="visible"
    width="1024px"
    @closed="closed()"
  >
    <div class="main">
      <baidu-map
        class="map"
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        @ready="handler"
      >
        <!-- <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT" /> -->
        <bm-marker v-if="markerFlag" :position="position" animation="BMAP_ANIMATION_BOUNCE" />
      </baidu-map>

      <div ref="right" class="right">
        <span>客户姓名：{{ temp.csmName||'' }}</span>
        <i class="el-icon-caret-right" @click="fold('right')" />
        <el-card class="rightCard">
          <el-form ref="form" label-width="0px">
            <el-form-item>
              <lb-table
                ref="lbTable"
                class="table"
                border
                highlight-current-row
                element-loading-text="加载中"
                :column="tableData01.column"
                :data="tableData01.data"
                :total="tableData01.total"
                custom-column
                style="overflow: auto;"
                align="center"
                @current-change="handleCurrentChange"
              />
            </el-form-item>
            <span>最近订单</span>
            <el-form-item>
              <lb-table
                ref="lbTable"
                class="table"
                border
                highlight-current-row
                element-loading-text="加载中"
                :column="tableData02.column"
                :data="tableData02.data"
                :total="tableData02.total"
                custom-column
                style="overflow: auto;"
                align="center"
              />
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  // import message from './message.json'

  export default {
    name: 'customerLocation',
    data() {
      return {
        markerFlag: true,
        position: { lng: 0, lat: 0 },
        center: { lng: 0, lat: 0 },
        zoom: 5,
        visible: false,
        temp: {},
        tableData01: {
          total: 0,
          column: [
            {
              type: 'index',
              width: 45
            },
            {
              prop: 'csmAddress',
              label: '客户地址',
              render: (h, { row }) =>
              <span >{row.csmAddress}</span>
            }
          ],
          data: []
        },
        tableData02: {
          total: 0,
          column: [
            {
              type: 'index',
              width: 45
            },
            {
              prop: 'orderCode',
              label: '订单号'
            },
            {
              prop: 'goodsDesc',
              label: '商品描述'
            }
          ],
          data: []
        }
      }
    },
    mounted() {

    },
    methods: {
      handler({ BMap, map }) {
        // console.log(BMap, map)
        this.center.lng = 114.298572
        this.center.lat = 30.584355
        this.zoom = 12
      },
      closed() {
        this.$nextTick(() => {
          this.center = {}
          this.markerFlag = false
          this.position = {}
        })
      },
      // 折叠效果
      fold(refItem) {
        const classname = event.target.className
        const flag = classname.includes('right')
        if (flag) {
          event.target.className = 'el-icon-caret-left'
        } else {
          event.target.className = 'el-icon-caret-right'
        }
        var width = this.$refs[refItem].style.width
        if (width === '20px') {
          this.$refs[refItem].style.width = '300px'
          this.$refs[refItem].childNodes[0].style.display = 'block'
          this.$refs[refItem].childNodes[4].style.display = 'block'
        } else {
          this.$refs[refItem].style.width = '20px'
          this.$refs[refItem].childNodes[0].style.display = 'none'
          this.$refs[refItem].childNodes[4].style.display = 'none'
        }
      },
      // 定位
      handleCurrentChange(row) {
        // console.log(row, 'row')
        if (row.latitude === 0 && row.longitude === 0) {
          this.$message({
            message: '没有坐标',
            type: 'warning'
          })
          this.markerFlag = false
        } else {
          this.markerFlag = true
          this.position.lat = row.latitude || ''
          this.position.lng = row.longitude || ''
          this.center = this.position
          this.zoom = 15
        }
      },
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          this.markerFlag = false
          if (temp) {
            console.log(temp, 'temp')
            this.temp = Object.assign(this.temp, temp.data)
            this.tableData01.data = temp.data.addressItems
            this.tableData02.data = temp.data.orderList ? temp.data.orderList : []
            // this.message = temp.data
          }
          // console.log(temp)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  font-size: 14px;

  .map {
    width: 100%;
    height: 630px;
  }

  .right {
    position: relative;
    width: 300px;
    height: 630px;
    padding: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #777;
    transition: all 0.3s;

    i {
      position: absolute;
      top: 3px;
      right: 0;
    }

    .rightCard {
      height: 100%;

      .table {
        height: 50%;
      }

      /deep/ .el-card__body {
        padding: 0;
      }
      /deep/ .el-card__header {
        height: 24px;
        padding: 0 10px;
        font-size: 14px;
        font-weight: bold;
        // padding: 0;
        line-height: 24px;
        color: #373A3C;
        background: #e3e3e3;
        border: 1px solid #ddd;
        box-sizing: border-box;
      }
    }
  }
}
</style>
